<template autoRoute="true">
  <div class="container_main" v-loading="loading">
    <div class="config">
      <div
        class="config-left"
        style="font-size: 16px; color: #000; font-weight: 600"
      >
        项目概览
      </div>
      <div class="config-right" @click="goConfig('edit')">
        <img
          style="display: block; margin-right: 5px"
          src="@/assets/layoutSet.svg"
          alt=""
        />

        <div style="font-size: 14px; color: #5e5e5e">配置报表</div>
      </div>
    </div>
    <div class="grid-layout-main-custom">
      <GridLayout v-model:layout="layout" :row-height="30" :col-num="24">
        <GridItem
          v-for="item in layout"
          :key="item.i"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :moved="false"
          :static="false"
          :isDraggable="false"
          :isResizable="false"
        >
          <component :is="item.type" :item="item" :key="item">
            <template #default>
              <div
                style="
                  margin-right: auto;
                  color: black;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  margin-top: 5px;
                "
              >
                {{ (dragSourceMap as any)[item.type] }}
              </div>
            </template>
          </component>
        </GridItem>
      </GridLayout>
    </div>
  </div>
</template>

<script setup lang="ts">
  /**
   * @description 项目概览
   */
  import { ref, onMounted } from "vue";
  import { GridLayout, GridItem } from "grid-layout-plus";
  import { getProjectOverview, getProjectConfigById } from "./api.ts";
  import { useRouter, useRoute } from "vue-router";
  import { ElMessage } from "element-plus";
  import { Customcomponents, dragSourceMap } from "./const.ts";

  const router = useRouter();
  const route = useRoute();

  defineOptions({
    components: Customcomponents,
  });

  const loading = ref<boolean>(false);
  const layout = ref<any[]>([]);
  const projectId = ref<string>("");

  /**
   * @description 处理后端返回的数据格式
   */
  const dataMap = (data: any) => {
    const {
      plannedStartTime,
      actualStartTime,
      progress,
      remark,
      creatorObject,
      createTime,
      creatorName,
      creator,
      name,
      icon,
      projectMilestoneVoList,
      projectMemberVOList,
      projectAnnouncementVoList,
      projectUpdatesVoList,
    } = data ?? {};
    return {
      ProjectDetail: {
        plannedStartTime,
        actualStartTime,
        progress,
        remark,
        creatorObject,
        createTime,
        creatorName,
        creator,
        name,
        icon,
      },
      Announcement: { projectAnnouncementVoList },
      Milestone: { projectMilestoneVoList },
      ProjectTeamMember: {
        projectMemberVOList,
      },
      ProjectDynamic: {
        projectUpdatesVoList,
      },
    };
  };

  /**
   * @description 处理配置的路由
   */
  const goConfig = (state: string) => {
    const id = (route?.params?.projectId as string) ?? route.query?.projectId;
    router.push({
      name: "Editor",
      params: {
        id,
        state,
        projectId: projectId.value,
        pageKey: "shapeConfig",
      },
    });
  };

  onMounted(async () => {
    loading.value = true;
    try {
      const result = await getProjectOverview(
        (route?.params?.projectId as string) ?? route.query?.projectId,
      );
      // 处理数据
      const dataResult = dataMap(result);
      layout.value = layout.value?.map((ele) => ({
        ...ele,
        data: (dataResult as any)?.[ele.type],
      }));
      projectId.value = result?.layoutConfigId;
      if (result?.layoutConfigId) {
        // 处理布局
        const config = await getProjectConfigById(result?.layoutConfigId);

        layout.value = JSON.parse(config?.pageValue ?? "[]")?.map(
          (ele: any) => ({
            ...ele,
            data: (dataResult as any)?.[ele.type],
          }),
        );
      }
    } catch (error) {
      ElMessage.error("获取数据失败！");
    } finally {
      loading.value = false;
    }
  });
</script>

<style scoped lang="scss">
  $editor-radius: 2px;
  $editor-border-width: 1px;
  .container_main {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    padding: 5px;
    .go-config {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
    }

    .config {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 5px;
      padding: 0px 5px;
      .config-left {
        margin-right: auto;
      }
      .config-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
      }
    }
    .grid-layout-main-custom {
      flex: 1;
      overflow: auto;
    }
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    font-size: 16px;
    color: #141414;
    height: 30px;
  }
  .vgl-layout {
    --vgl-placeholder-bg: #fff;
    background-color: #fff;
    user-select: none;
  }

  :deep(.vgl-item:not(.vgl-item--placeholder)) {
    background-color: #fff;
    border: $editor-border-width solid #e6e6e6;
    border-radius: $editor-radius;
    &:before {
      display: none;
    }
  }

  :deep(.vgl-item--resizing) {
    opacity: 90%;
  }
  :deep(.vgl-item__resizer:before) {
    display: none;
  }

  :deep(.vgl-item--static) {
    background-color: red;
  }
</style>
